<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
    </head>
    <style>
        .box1 {
            border: 1px solid red;
            height: 50px;
            margin-left: 100px;
        }
        .box2 {
            border: 1px solid green;
            height: 20px;
            width: 100px;
            /* 定位默认值为static
            relative 不脱离文档流，直接是自己相对于父元素的定位，不需要父元素有定位属性（非static）
            absolute 脱离文档流需要父元素有定位属性（非static）
            */
            position: relative;
            left: 10px;
            top: 10px;
        }
        
        body {
            height: 1200px;
        }
        .box3 {
            height: 50px;
            width: 100%;
            border: 1px solid pink;
            position: sticky;
            top: 0px;
            background: red;
            z-index: 999;
            opacity: 1;
        }
    </style>
    <body>
        
        <div class="box1">
            <div class="box2"></div>
        </div>
        <div class="box3">stddddd</div>
        <div class="box1">
            <div class="box2"></div>
        </div>
        
    </body>
</html>